// GENERAL
@import '../assets/imports.styl'

*
	bbox()


html
	font-size 16px
	
body, html
	min-rect 100%
	margin 0
	padding 0

body
	rect 100%
	overflow hidden

@css{
	::selection{
		background-color: #f59995;
	  color: white;
	  text-shadow: none;
	}

	::-moz-selection{
		background-color: #f59995;
	  color: white;
	  text-shadow: none;
	}
	
}


// FONT
.bold-g, .b-g
	font-weight bold
// FONT

.op-0-g
	opacity 0
.op-5-g
	opacity .5

a, .link-e
	text-decoration none
	position relative
	color inherit


.float-left-g,  .f-l-g
	float left
.float-right-g, .f-r-g
	float right


.h-g
	display none
.h-g-i
	display none II


// CLEARFIX
.cf:after,
.cf:before {
    content: '';
    display: table;
}
.cf:after {
    clear: both;
}
.cf {
    zoom: 1;
}


metrics()
	maxSize = 20
	short = w h
	long  = width height
	for property, j in long
		for i in 1..maxSize
			.{property}-x{i}-gm, .{short[j]}-x{i}-gm
				{property} i*gs
	
	maxSize = 20
	short = m p
	long  = margin padding
	for property, j in long
		for i in 1..maxSize
			shortSide = -l -r -t -b ''
			longSide  = -left -right -top -bottom ''
			for prop, x in longSide

				.{property}{prop}-x{i}-gm, .{short[j]}{shortSide[x]}-x{i}-gm
					{property}{prop} i*gs


colors()
	colors 		=   c-bg    c-red   c-orange1   c-orange2   c-grey1   c-grey2   c-grey3   c-grey4   c-grey5    c-grey6  c-grey7  c-grey8  c-grey9  c-grey10
	colorsNames = 'c-bg' 'c-red' 'c-orange1' 'c-orange2' 'c-grey1' 'c-grey2' 'c-grey3' 'c-grey4' 'c-grey5' 'c-grey6'  'c-grey7' 'c-grey8' 'c-grey9' 'c-grey10'
	for color, i in colors
		.{colorsNames[i]}-bg-g
			background-color color
			
metrics()
colors()


